import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:geomancy/providers/user_provider.dart';
import 'package:geomancy/styles/index.dart';
import 'package:geomancy/tools/constant.dart';
import 'package:geomancy/widgets/common_btn.dart';
import 'package:geomancy/widgets/common_header.dart';
import 'package:geomancy/widgets/stroke_text.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

class RegisterSexPage extends StatefulWidget {
  const RegisterSexPage({super.key});

  @override
  State<RegisterSexPage> createState() => _RegisterNicknamePageState();
}

class _RegisterNicknamePageState extends State<RegisterSexPage> {
  String sex = '';

  void nextHandle() {
    if (sex == '') {
      return;
    }
    context.read<UserProvider>().setSex = sex;
    context.push('/register_birthday');
  }

  @override
  Widget build(BuildContext context) {
    final bool disabled = sex == '';
    return Scaffold(
      appBar: CommonHeader.appBar(context: context, showActions: false),
      backgroundColor: ColorStyle.pageDefaultColor,
      resizeToAvoidBottomInset: false,
      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.only(top: 100.w, left: Constant.PAGEPADDING.w, right: Constant.PAGEPADDING.w),
          child: DottedBorder(
            borderType: BorderType.RRect,
            strokeWidth: 5.w,
            radius: Radius.circular(60.w),
            dashPattern: [12.w, 6.w],
            color: ColorStyle.borderColor,
            child: Container(
              width: double.infinity,
              height: 1050.w,
              padding: EdgeInsets.only(top: 110.w, bottom: 60.w, left: 80.w, right: 80.w),
              decoration: BoxDecoration(
                color: ColorStyle.themeLightColor,
                borderRadius: BorderRadius.all(Radius.circular(55.w)),
              ),
              child: Column(
                children: [
                  StrokeText(txt: '设置性别', strokeWidth: 8.sp, fontSize: 60.sp, color: ColorStyle.themeColor, fontFamily: 'fontZKKLT'),
                  SizedBox(height: 30.w),
                  Text('慎重选择，不可更改', style: TextStyle(fontSize: 30.sp, color: ColorStyle.textColor)),
                  SizedBox(height: 100.w),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        children: [
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                sex = '0';
                              });
                            },
                            child: Container(
                                margin: EdgeInsets.only(bottom: 60.w),
                                width: 220.w,
                                height: 220.w,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.all(Radius.circular(110.w))
                                ),
                                child: DottedBorder(
                                  borderType: BorderType.RRect,
                                  strokeWidth: 5.w,
                                  radius: Radius.circular(110.w),
                                  dashPattern: [12.w, 6.w],
                                  color: sex == '0' ? ColorStyle.borderColor : Colors.transparent,
                                  padding: EdgeInsets.all(1.w),
                                  child: Image.asset('assets/icons/register_sex_avatar_female.png', width: 220.w, fit: BoxFit.cover),
                                )
                            ),
                          ),
                          Image.asset('assets/icons/register_sex_icon_female.png', width: 56.w),
                        ],
                      ),
                      Column(
                        children: [
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                sex = '1';
                              });
                            },
                            child: Container(
                              margin: EdgeInsets.only(bottom: 60.w),
                              width: 220.w,
                              height: 220.w,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(110.w))
                              ),
                              child: DottedBorder(
                                borderType: BorderType.RRect,
                                strokeWidth: 5.w,
                                radius: Radius.circular(110.w),
                                dashPattern: [12.w, 6.w],
                                color: sex == '1' ? ColorStyle.borderColor : Colors.transparent,
                                padding: EdgeInsets.all(1.w),
                                child: Image.asset('assets/icons/register_sex_avatar_male.png', width: 220.w, fit: BoxFit.cover),
                              ),
                            ),
                          ),
                          Image.asset('assets/icons/register_sex_icon_male.png', width: 56.w),
                        ],
                      )
                    ],
                  ),
                  const Expanded(child: SizedBox()),
                  CommonBtnWidget(size: Size(510.w, 100.w), disabled: disabled, txt: '下一步', onTap: nextHandle)
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
